<!--
 * @FileDescription 传感器信息页面
 * @Author lz
 * @Date 20230201 18:25:27
 * @LastEditors lz
 * @LastEditTime 20230201 18:25:27
-->
<template>
    <div class="wp">
        <!-- 顶部 -->
        <hdrModel Hierarchy="1" :ID="0"></hdrModel>

        <!-- 显示内容 -->
        <div class="wpBox">
            <div id="allmap"></div>
        </div>
        <!-- 传感器信息 -->
        <div class="Information">
            <div class="tit">传感器信息</div>
            <!-- <div class="row_Infor">
                <div class="col_l">航向:</div>
                <div class="col_r">666°</div>
            </div>
            <div class="row_Infor">
                <div class="col_l">卫星数量:</div>
                <div class="col_r">666颗</div>
            </div>
            <div class="row_Infor">
                <div class="col_l">海波:</div>
                <div class="col_r">666M</div>
            </div> -->
            <div class="row_Infor">
                <div class="col_l">经度:</div>
                <div class="col_r">{{sensorData.Default.lon.value}}°</div>
            </div>
            <div class="row_Infor">
                <div class="col_l">纬度:</div>
                <div class="col_r">{{sensorData.Default.lat.value}}°</div>
            </div>
        </div>
        <!-- 传感器图像 -->
        <div class="videoBox">
            <img :src="sensorData.Default.imageData.value">
        </div>
        <!-- 点云设置 -->
        <div class="pointCloudSettings">
            <div class="innerBox">
                <div class="tit innerBox_tit">激光雷达点云设置</div>
                <div class="row_setUp">
                    <div class="inp_l">点半径:</div>
                    <div class="inp_r"> <a-input v-model:value="state.value" /></div>
                </div>
                <div class="row_setUp">
                    <div class="inp_l">点亮度:</div>
                    <div class="inp_r"> <a-input v-model:value="state.value" /></div>
                </div>
                <a-checkbox v-model:checked="state.checked" style="color: #fff;" class="checkBox">区分反射率</a-checkbox>
                <div class="tit">超声波雷达预警设置</div>
                <a-checkbox v-model:checked="state.checked" style="color: #fff;" class="checkBox">区分反射率</a-checkbox><br />
                <a-checkbox v-model:checked="state.checked" style="color: #fff;" class="checkBox">区分反射率</a-checkbox>
                <div class="tit">相机设置</div>
                <a-checkbox v-model:checked="state.checked" style="color: #fff;" class="checkBox">区分反射率</a-checkbox><br />
                <a-checkbox v-model:checked="state.checked" style="color: #fff;" class="checkBox">区分反射率</a-checkbox>
                <div class="tit">障碍物设置</div>
                <a-checkbox-group v-model:value="state.value">
                    <a-row class="checkBox">
                        <a-col :span="24">
                            <a-checkbox value="A" style="color: #fff;">显示障碍物</a-checkbox>
                        </a-col>
                        <a-col :span="24">
                            <a-checkbox value="B" style="color: #fff;">显示障碍物标签</a-checkbox>
                        </a-col>
                        <a-col :span="8">
                            <a-checkbox value="C" style="color: #fff;">ID</a-checkbox>
                        </a-col>
                        <a-col :span="16">
                            <a-checkbox value="D" style="color: #fff;">类型</a-checkbox>
                        </a-col>
                        <a-col :span="8">
                            <a-checkbox value="E" style="color: #fff;">X</a-checkbox>
                        </a-col>
                        <a-col :span="8">
                            <a-checkbox value="E" style="color: #fff;">Y</a-checkbox>
                        </a-col>
                        <a-col :span="8">
                            <a-checkbox value="E" style="color: #fff;">Z</a-checkbox>
                        </a-col>
                        <a-col :span="8">
                            <a-checkbox value="E" style="color: #fff;">长</a-checkbox>
                        </a-col>
                        <a-col :span="8">
                            <a-checkbox value="E" style="color: #fff;">宽</a-checkbox>
                        </a-col>
                        <a-col :span="8">
                            <a-checkbox value="E" style="color: #fff;">高</a-checkbox>
                        </a-col>
                    </a-row>
                </a-checkbox-group>
            </div>
        </div>
        <locationMark></locationMark>
        <networkPrompt></networkPrompt>
</div>
</template>

<script setup lang="ts">
import { reactive, ref, toRefs, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onUnmounted, StyleValue, defineProps, defineEmits, isReactive, watch } from 'vue'
import hdrModel from '../header/index.vue'
import locationMark from './model/locationMark.vue'
import networkPrompt from './model/networkPrompt.vue'
import sensorData from "@components/Apps/Simulation/sensorModel/sensor";

const state = reactive({
    value: '',
    checked: ref(false),
    lng: '116.404404',
    lat: '39.909789',
});
const init = () => {
    let Bmap = window.BMap
    var b = new Bmap.Map("allmap", { enableMapClick: false })
    b.centerAndZoom(new Bmap.Point(sensorData.Default.lon.value, sensorData.Default.lat.value), 17)
    b.enableScrollWheelZoom(true)
}
//监听经纬度
watch(() => sensorData.Default.lon.value, (newVal, oldVal) => {
    if (newVal != oldVal) {
        // state.lng = sensorData.Default.lon.value
        // state.lat = sensorData.Default.lat.value
        init()
    }
})
onMounted(() => {
    init()
});
</script>

<style scoped>
.wp {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    position: relative;
}

.wpBox {
    position: absolute;
    top: 118px;
    left: 31px;
    width: 319px;
    height: 430px;
    background-image: url('/images/map_bg.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.Information {
    position: absolute;
    top: 549px;
    left: 31px;
    width: 319px;
    height: 511px;
    background-image: url('/images/sensornIformation_bg.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.videoBox {
    position: absolute;
    right: 30px;
    top: 118px;
    width: 624px;
    height: 363px;
    background-image: url('/images/videoBox.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    text-align: center;
    padding-top: 14px;
}

.videoBox>img {
    width: 590px;
    height: 330px;
}

.pointCloudSettings {
    position: absolute;
    right: 30px;
    top: 482px;
    width: 319px;
    height: 580px;
    background-image: url('/images/sensornIformation_bg.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.innerBox {
    margin-top: 16px;
    width: 319px;
    height: 540px;
    overflow-y: auto;
}

.tit {
    font-size: 24px;
    font-weight: bold;
    color: #FFFFFF;
    padding-left: 39px;
    padding-top: 30px;
}

.row_Infor {
    overflow: hidden;
    font-size: 18px;
    font-weight: bold;
    color: #FFFFFF;
    margin: 10px;
}

.col_l {
    text-align: right;
    width: 36%;
    float: left;
}

.col_r {
    float: left;
    padding-left: 10px;
}

.row_setUp {
    overflow: hidden;
    font-size: 18px;
    color: #FFFFFF;
}

.inp_l {
    width: 30%;
    text-align: right;
    display: inline-block;
    vertical-align: middle
}

.inp_r {
    width: 160px;
    height: 60px;
    margin-left: 10px;
    background-image: url('/images/sensor_inp_bg.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    display: inline-block;
    vertical-align: middle
}

:deep().ant-input {
    width: 140px;
    background-color: transparent;
    border: none;
    height: 40px;
    color: #fff;
    margin-top: 10px;
    margin-left: 10px;
    border-radius: 10px;
}

.checkBox {
    margin-left: 40px;
    margin-top: 6px;
}

::-webkit-scrollbar {
    display: none;
}

.innerBox_tit {
    padding-top: 10px;
}

#allmap {
    width: 91%;
    height: 94%;
    margin: 0 auto;
    margin-top: 12px;
}
</style>